import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem, MenuList } from 'material-ui/Menu';
import Grow from 'material-ui/transitions/Grow';
import Paper from 'material-ui/Paper';
import MoreVert from 'material-ui-icons/MoreVert'
import { Link } from 'react-router-dom'
import { withStyles } from 'material-ui/styles';
import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
import User from 'material-ui-icons/AccountBox'

import category from '../../constant/category'

import styles from './style'

class MenuListComposition extends React.Component {
  state = {
    open: false,
  };

  handleClick = () => {
    this.setState({ open: !this.state.open });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { classes } = this.props;
    const { open } = this.state;
    return (
      <div className={classes.root}>
        <div className={classes.meunIcon} onClick={this.handleClick}>
          <MoreVert className={classes.moreVert} />
        </div>
        <ClickAwayListener onClickAway={this.handleClose}>
          <Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }} className={classes.menuList}>
            <Paper>
              <MenuList role="menu" style={{ display: open ? 'block' : 'none' }}>
                { category.map((item) => {
                    const Icon = item.icon;
                    return (
                      <MenuItem
                        className={this.props.classes.menu}
                        onClick={this.handleClose}
                        key={item.title}
                      >
                        <Icon /><Link className={classes.Link} to={item.url}>{item.title}</Link>
                      </MenuItem>
                    )
                  })
                }
                <MenuItem
                  className={this.props.classes.menu}
                  onClick={this.handleClose}
                  key="用户信息"
                >
                  <User /><Link className={classes.Link} to="/user">用户信息</Link>
                </MenuItem>
              </MenuList>
            </Paper>
          </Grow>
        </ClickAwayListener>
      </div>
    );
  }
}

MenuListComposition.propTypes = {
  classes: PropTypes.objectOf(Object),
};

export default withStyles(styles)(MenuListComposition);
